body{
    margin: 0;
    padding: 0;
    background: #333;
}
.container{
    margin: 20px auto;
    width: 1200px;
    -webkit-columns: 4;
       -moz-columns: 4;
            columns: 4;
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
}
.container .box{
    width: 100%;
    margin: 0 0 20px;
    padding: 10px;
    background: #fff;
    overflow: hidden;
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
}
.container .box img{
    max-width: 100%;
}
@media (max-width:1200px) {
    .container{
        -webkit-columns: 3;
           -moz-columns: 3;
                columns: 3;
        width: calc(100% - 50px);
        
    }
}
@media (max-width:768px) {
    .container{
        -webkit-columns: 2;
           -moz-columns: 2;
                columns: 2;
                width: calc(100% - 50px);
    }
}
@media (max-width:450px) {
    .container{
        -webkit-columns: 1;
           -moz-columns: 1;
                columns: 1;
                width: calc(100% - 50px);
    }
}